<template>
  <div>
    <div class="carousel_wrap">
      <el-carousel ref="carouselRef" :interval="0" indicator-position="none" :autoplay="false" arrow="always" @change="carouselChange">
        <el-carousel-item v-for="item in list" :key="item.title">
          <div v-if="item.src" class="video_wrap">
            <video ref="carouselVideoRefs" muted loop autoplay :src="item.src"></video>
          </div>
          <div v-else-if="item.img" class="img_wrap">
            <img class="img" :src="item.img" />
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="indicator_wrap">
      <div
        v-for="(item, idx) in list"
        :key="item.title"
        :class="{
          indicator_item: true,
          active_indicator_item: indicatorIdx === idx
        }"
        @click="setCarouselItem(idx)"
      >
        <div class="title">{{ item.title }}</div>
        <div class="desc">{{ item.desc }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data: () => ({
    indicatorIdx: 0
  }),
  mounted() {
    this.onloadVideo()
  },
  methods: {
    onloadVideo() {
      if (this.$refs.carouselVideoRefs) {
        const videoArr = Array.from(this.$refs.carouselVideoRefs)
        videoArr.forEach((video, idx) => {
          video.onloadeddata = () => {
            idx === 0 ? video.play() : video.pause()
          }
        })
      }
    },
    carouselChange(index) {
      this.indicatorIdx = index
      if (this.$refs.carouselVideoRefs) {
        const videoArr = Array.from(this.$refs.carouselVideoRefs)
        videoArr.forEach((video, idx) => {
          idx === index ? video.play() : video.pause()
        })
      }
    },
    setCarouselItem(index) {
      this.$refs.carouselRef.setActiveItem(index)
    }
  }
}
</script>

<style scoped>
.carousel_wrap {
  width: 21.86rem;
  height: 8.5rem;
  margin: 0 auto;
}
.carousel_wrap >>> .el-carousel,
.el-carousel__container,
.el-carousel__item {
  height: 100% !important;
  width: 100%;
  overflow: hidden;
}

.carousel_wrap >>> .el-carousel__container {
  height: 100% !important;
}

.carousel_wrap >>> .el-carousel__arrow {
  width: 0.76rem;
  height: 0.76rem;
  font-size: 0.4rem;
  background-color: rgba(255, 255, 255, 0.6);
}

.indicator_wrap {
  display: flex;
  justify-content: center;
  margin-top: -0.5rem;
  position: relative;
  z-index: 999;
}
.indicator_item {
  width: 5.2rem;
  box-sizing: border-box;
  padding: 0.74rem 0.6rem;
  cursor: pointer;
  background: #353a41;
  color: hsla(0, 0%, 100%, 0.2);
  border-radius: 16px;
  transition: all 0.2s;
}
.indicator_item:hover {
  background: #8a94a1;
  color: #f3ebbc;
  transform: translate3d(0,-4px,0);
}
.indicator_item + .indicator_item {
  margin-left: 22px;
}
.active_indicator_item {
  background: #575e68 !important;
  color: #fff !important;
}

.indicator_item .title {
  font-size: 0.4rem;
  line-height: 0.48rem;
  margin-bottom: 0.4rem;
}
.indicator_item .desc {
  font-size: 0.3rem;
  line-height: 0.5rem;
}
</style>